<template>
	<div class="md-tag">
		<template v-if="shape === 'quarter'">
			<div :class="computedClass">
				<div class="quarter-content">
					<slot></slot>
				</div>
				<div class="quarter-bg" :style="colorStyle"></div>
			</div>
		</template>
		<template v-else-if="shape === 'coupon'">
			<div :class="computedClass">
				<div class="coupon-container" :style="colorStyle">
					<div
						class="left-coupon"
						:style="{ background: fillColor ? 'radial-gradient(circle at left, transparent 33%, ' + fillColor + ' 33%)' : ''}"
						v-if="shape === 'coupon'"
					>
					</div>
					<slot></slot>
					<div
						class="right-coupon"
						:style="{ background: fillColor ? 'radial-gradient(circle at right, transparent 33%, ' + fillColor + ' 33%)' : ''}"
						v-if="shape === 'coupon'"
					>
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<div :class="computedClass" :style="[colorStyle, sizeStyle]">
				<slot></slot>
			</div>
		</template>
	</div>
</template>

<script>
import { transformCamelCase } from '../_util'
export default {
	name: 'ynet-tag',
	props: {
		size: {
			type: String, // tiny, small, large
			default: 'large',
		},
		shape: {
			// square, circle, fillet, quarter, coupon, bubble
			type: String,
			default: 'square',
		},
		sharp: {
			// top-left, top-right, bottom-left, bottom-right
			type: String,
			default: '',
		},
		type: {
			// fill ghost
			type: String,
			default: 'ghost',
		},
		fillColor: {
			type: String,
			default: '',
		},
		fontWeight: {
			// normal, bold, bolder
			type: String,
			default: 'normal',
		},
		fontColor: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			sizeStyle: {},
		}
	},
	computed: {
		computedClass() {
			return [
				'default',
				`size-${this.size}`,
				`shape-${this.shape}`,
				`type-${this.type}`,
				`font-weight-${this.fontWeight}`,
			]
		},
		colorStyle() {
			let style = {}
			if (this.type === 'fill') {
				// eslint-disable-next-line
				this.fillColor && (style.background = this.fillColor)
			}
			if (this.fontColor) {
				if (this.type === 'ghost') {
					style.borderColor = this.fontColor
				}
				style.color = this.fontColor
			}
			return style
		},
	},
	mounted() {
		this.$nextTick(() => {
			if (this.shape === 'circle') {
				const radius = this.$el.offsetHeight / 2
				this.$set(this.sizeStyle, 'paddingLeft', radius + 'px')
				this.$set(this.sizeStyle, 'paddingRight', radius + 'px')
				this.$set(this.sizeStyle, 'borderRadius', radius + 'px')
				if (this.sharp) {
					this.$set(this.sizeStyle, transformCamelCase(`border-${this.sharp}-radius`), 0)
				}
			}
		})
	},
}
</script>

<style lang="stylus">
.md-tag
	color color-text-base
	font-size 28px
	text-align center
	display inline-block
	-webkit-user-select none
	.default
		background rgba(0,0,0,0)
		color tag-color
		border-color tag-color
	.shape-square
		padding 0 12px
		border-radius 50%
	.shape-square
		padding 0 12px
		border-radius 0
	.shape-fillet
		padding 2px 8px
		border-radius tag-fillet-radius
	.shape-quarter
		position relative
		display flex
		width 56px
		height 56px
		background transparent !important
		overflow hidden
		.quarter-content
			position relative
			left 10%
			bottom 10%
			display flex
			flex 1
			z-index 2
			justify-content center
			align-items center
			// transform translate(-50%, -75%)
		.quarter-bg
			position absolute
			top -100%
			left 0
			width 200%
			height 200%
			border-radius radius-circle
		.quarter-wrap
			display inline-block
			padding 16px 12px 10px 26px
		.quarter-wrap-hidden
			visibility hidden
			display inline-block
			padding 16px 12px 10px 26px
		
		&.size-small
			width 40px
			height 40px
		&.size-tiny
			width 24px
			height 24px
	.shape-coupon
		position relative
		padding 0 10px
		background transparent !important
		.coupon-container
			padding 2px 0
		.left-coupon,
		.right-coupon
			position absolute
			top 0
			width 10px
			height 100%
		.left-coupon
			left 0
		.right-coupon
			right 0
		
		&.size-small
			padding 0 8px
			.left-coupon,
			.right-coupon
				width 8px
		&.size-tiny
			padding 0 5px
			.left-coupon,
			.right-coupon
				width 5px
	.shape-bubble
		width 50px
		padding 6px 0
		border-radius radius-circle
		border-bottom-left-radius 0
		box-sizing border-box
		&.size-small
			width 38px
			padding 3px 0
		&.size-tiny
			width 24px
			padding 2px 0
	.size-large
		font-size tag-large-font-size
	.size-small
		font-size tag-small-font-size
	.size-tiny
		font-size tag-tiny-font-size
	.type-fill
		color color-text-base-inverse
		background tag-color
	.type-ghost
		border 1px solid tag-color
		background rgba(0,0,0,0)
	.font-weight-normal
		font-weight normal
	.font-weight-bold
		font-weight bold
	.font-weight-bolder
		font-weight bolder
	.md-icon.icon-font
		font-size inherit
		transform scale(1.2)
</style>